<template>
	<view class="container">
		<!-- 头部菜单 -->
		<view class="order-tit">
			<text data-sts="0" :class="sts==0?'on':''" @click.native="onStsTap">
				全部
			</text>
			<text data-sts="1" :class="sts==1?'on':''" @click.native="onStsTap">
				待支付
			</text>
			<text data-sts="2" :class="sts==2?'on':''" @click.native="onStsTap">
				待发货
			</text>
			<text data-sts="3" :class="sts==3?'on':''" @click.native="onStsTap">
				待收货
			</text>
			<text data-sts="5" :class="sts==5?'on':''" @click.native="onStsTap">
				已完成
			</text>
		</view>
		<!-- end 头部菜单 -->
		<view class="main">
			<view v-if="list.length==0" class="empty">
				还没有任何相关订单
			</view>
			<!-- 订单列表 -->
			<block v-for="(item, index) in list" :key="index">
				<view class="prod-item">
					<view class="order-num">
						<text>订单编号：{{ item.orderNumber }}</text>
						<view class="order-state">
							<text
								:class="'order-sts  ' + (item.status==1?'red':'') + '  ' + ((item.status==5||item.status==6)?'gray':'')">
								{{
                  item.status == 1 ? '待支付' : (item.status == 2 ? '待发货' : (item.status == 3 ? '待收货' : (item.status == 5 ? '已完成' : '已取消')))
                }}
							</text>

							<view v-if="item.status==5 || item.status==6" class="clear-btn">
								<image src="@/static/images/icon/clear-his.png" class="clear-list-btn"
									:data-ordernum="item.orderNumber" @click.native="delOrderList" />
							</view>
						</view>
					</view>

					<!-- 商品列表 -->
					<!-- 一个订单单个商品的显示 -->
					<block v-if="item.orderItems.length==1">
						<block v-for="(prod, index2) in item.orderItems" :key="index2">
							<view>
								<view class="item-cont" :data-ordernum="item.orderNumber"
									@click.native="toOrderDetailPage">
									<view class="prod-pic">
										<image :src="prod.pic" />
									</view>
									<view class="prod-info">
										<view class="prodname">
											{{ prod.prodName }}
										</view>
										<view class="prod-info-cont">
											{{ prod.skuName }}
										</view>
										<view class="price-nums">
											<text class="prodprice">
												<text class="symbol">
													￥
												</text>
												<text class="big-num">
													{{ wxs.parsePrice(prod.price)[0] }}
												</text>
												<text class="small-num">
													.{{ wxs.parsePrice(prod.price)[1] }}
												</text>
											</text>
											<text class="prodcount">
												x{{ prod.prodCount }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</block>
					<!-- 一个订单多个商品时的显示 -->
					<block v-else>
						<view class="item-cont" :data-ordernum="item.orderNumber" @click.native="toOrderDetailPage">
							<scroll-view scroll-x="true" scroll-left="0" scroll-with-animation="false"
								class="categories">
								<block v-for="(prod, index2) in item.orderItems" :key="index2">
									<view class="prod-pic">
										<image :src="prod.pic" />
									</view>
								</block>
							</scroll-view>
						</view>
					</block>

					<view class="total-num">
						<text class="prodcount">
							共1件商品
						</text>
						<view class="prodprice">
							合计：
							<text class="symbol">
								￥
							</text>
							<text class="big-num">
								{{ wxs.parsePrice(item.actualTotal)[0] }}
							</text>
							<text class="small-num">
								.{{ wxs.parsePrice(item.total)[1] }}
							</text>
						</view>
					</view>
					<!-- end 商品列表 -->
					<view class="prod-foot">
						<view class="btn">
							<text v-if="item.status==1" class="button" :data-ordernum="item.orderNumber"
								hover-class="none" @click.native="onCancelOrder">
								取消订单
							</text>
							<text v-if="item.status==1" class="button warn" :data-ordernum="item.orderNumber"
								hover-class="none" @click.native="normalPay">
								付款
							</text>
							<text v-if="item.status==3 || item.status==5" class="button"
								:data-ordernum="item.orderNumber" hover-class="none" @click.native="toDeliveryPage">
								查看物流
							</text>
							<text v-if="item.status==3" class="button warn" :data-ordernum="item.orderNumber"
								hover-class="none" @click.native="onConfirmReceive">
								确认收货
							</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
	<!-- end 订单列表 -->
</template>

<script>
	import number from "../../wxs/number";
	import {
		addOrderList,
		editStatus,
		deleteOrder
	} from "../../api/mine.js"
	export default {
		data() {
			return {
				wxs: number(),
				sts: 0,
				pages: 0,
				list: []
			}
		},
		methods: {
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom() {
				if (current.value < pages.value) {
					this.loadOrderData(this.status, current.value + 1)
				}
			},
			/**
			 * 加载订单数据
			 */

			loadOrderData(sts) {
				uni.showLoading() // 加载订单列表
				addOrderList(sts)
					.then(({
						data
					}) => {
						this.list = data
						uni.hideLoading()
					})
			},
			/**
			 * 状态点击事件
			 */
			onStsTap(e) {
				this.sts = e.currentTarget.dataset.sts //获取data-sts的值
				this.loadOrderData(this.sts, 1)
			},
			/**
			 * 查看物流
			 */
			toDeliveryPage(e) {
				uni.navigateTo({
					url: '/pages/express-delivery/express-delivery?orderNum=' + e.currentTarget.dataset.ordernum
				})
			},
			/**
			 * 取消订单
			 */
			onCancelOrder(e) {
				const ordernum = e.currentTarget.dataset.ordernum
				uni.showModal({
					title: '',
					content: '要取消此订单？',
					confirmColor: '#3e62ad',
					cancelColor: '#3e62ad',
					cancelText: '否',
					confirmText: '是',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							editStatus(ordernum, 6)
								.then(() => {
									uni.navigateTo({
										url: '/pages/orderList/orderList?sts=1'
									})
									uni.hideLoading()
								})
						}
					}
				})
			},
			/**
			 * 模拟支付，直接提交成功
			 * @param e
			 */
			normalPay(e) {
				uni.showLoading({
					mask: true
				})
				http.request({
						url: '/p/order/normalPay',
						method: 'POST',
						data: {
							orderNumbers: e.currentTarget.dataset.ordernum
						}
					})
					.then(({
						data
					}) => {
						uni.hideLoading()
						if (data) {
							uni.showToast({
								title: '模拟支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + e
										.currentTarget.dataset.ordernum
								})
							}, 1200)
						} else {
							uni.showToast({
								title: '支付失败！',
								icon: 'none'
							})
						}
					})
			},
			/**
			 * 查看订单详情
			 */
			toOrderDetailPage(e) {
				uni.navigateTo({
					url: '/pages/order-detail/order-detail?orderNumber=' + e.currentTarget.dataset.ordernum
				})
			},
			/**
			 * 确认收货
			 */
			onConfirmReceive(e) {
				uni.showModal({
					title: '',
					content: '我已收到货？',
					confirmColor: '#eb2444',
					success(res) {
						const ordernum = e.currentTarget.dataset.ordernum
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							editStatus(ordernum, 5)
								.then(() => {
									uni.navigateTo({
										url: '/pages/orderList/orderList?sts=3'
									})
									uni.hideLoading()
								})
						}
					}
				})
			},

			/**
			 * 删除已完成||已取消的订单
			 * @param e
			 */
			delOrderList(e) {
				uni.showModal({
					title: '',
					content: '确定要删除此订单吗？',
					confirmColor: '#eb2444',
					success(res) {
						if (res.confirm) {
							const ordernum = e.currentTarget.dataset.ordernum
							uni.showLoading()
							deleteOrder(ordernum)
								.then(() => {
									uni.navigateTo({
										url: '/pages/orderList/orderList?sts=0'
									})
									uni.hideLoading()
								})
						}
					}
				})
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			if (options.sts) {
				this.sts = options.sts
				this.loadOrderData(options.sts, 1)
			} else {
				this.loadOrderData(0, 1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
	  background-color: #f4f4f4;
	  color: #333;
	}
	.order-tit {
	  position: fixed;
	  top: 0;
	  display: flex;
	  justify-content: space-around;
	  z-index: 999;
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  background-color: #fff;
	  border-bottom: 2rpx solid #f4f4f4;
	  text {
	    display: block;
	    font-size: 28rpx;
	    color: 999;
	    width: 100rpx;
	    text-align: center;
	  }
	  text.on {
	    border-bottom: 4rpx solid #eb2444;
	    color: #eb2444;
	  }
	}
	.main {
	  margin-top: 100rpx;
	}
	.prod-item {
	  background-color: #fff;
	  margin-top: 15rpx;
	  font-size: 28rpx;
	  .item-cont {
	    .prod-pic {
	      image {
	        width: 180rpx;
	        height: 180rpx;
	        width: 100%;
	        height: 100%;
	      }
	      font-size: 0;
	      display: inline-block;
	      width: 160rpx;
	      height: 160rpx;
	      overflow: hidden;
	      background: #fff;
	      margin-right: 16rpx;
	    }
	    .categories {
	      white-space: nowrap;
	    }
	    display: flex;
	    align-items: center;
	    padding: 20rpx 30rpx;
	    border-radius: 10rpx;
	    display: -webkit-flex;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    background: #fafafa;
	    .prod-info {
	      margin-left: 10rpx;
	      font-size: 28rpx;
	      width: 100%;
	      position: relative;
	      height: 160rpx;
	      -webkit-flex: 1;
	      -ms-flex: 1;
	      -webkit-box-flex: 1;
	      -moz-box-flex: 1;
	      flex: 1;
	      .prodname {
	        font-size: 28rpx;
	        line-height: 36rpx;
	        max-height: 86rpx;
	        overflow: hidden;
	        display: -webkit-box;
	        -webkit-line-clamp: 2;
	        -webkit-box-orient: vertical;
	        text-overflow: ellipsis;
	        word-break: break-all;
	      }
	      .prod-info-cont {
	        color: #999;
	        line-height: 40rpx;
	        margin-top: 10rpx;
	        font-size: 22rpx;
	        overflow: hidden;
	        display: -webkit-box;
	        -webkit-line-clamp: 1;
	        -webkit-box-orient: vertical;
	        text-overflow: ellipsis;
	        word-break: break-all;
	      }
	    }
	  }
	  .order-num {
	    padding: 20rpx 30rpx;
	    display: flex;
	    justify-content: space-between;
	    font-size: 28rpx;
	    .clear-btn {
	      width: 32rpx;
	      height: 32rpx;
	      font-size: 0;
	      vertical-align: top;
	      margin-left: 42rpx;
	      position: relative;
	      &::after {
	        content: " ";
	        display: block;
	        position: absolute;
	        left: -10px;
	        top: 0rpx;
	        width: 1px;
	        height: 32rpx;
	        background: #ddd;
	      }
	      .clear-list-btn {
	        width: 100%;
	        height: 100%;
	        vertical-align: middle;
	      }
	    }
	  }
	  .total-num {
	    text-align: right;
	    padding: 20rpx 30rpx;
	    font-size: 28rpx;
	    .prodprice {
	      display: inline-block;
	      color: #333;
	    }
	    .prodcount {
	      margin-right: 20rpx;
	    }
	  }
	  .price-nums {
	    .prodprice {
	      color: #333;
	      position: absolute;
	      bottom: 0;
	    }
	    .prodcount {
	      position: absolute;
	      bottom: 5rpx;
	      right: 0;
	      color: #999;
	      font-family: verdana;
	    }
	  }
	  .prod-foot {
	    border-top: 2rpx solid #e6e6e6;
	    .total {
	      font-size: 25rpx;
	      margin-bottom: 20rpx;
	      padding-bottom: 20rpx;
	      border-bottom: 2rpx solid #e9eaec;
	    }
	    .btn {
	      display: flex;
	      align-items: center;
	      justify-content: flex-end;
	    }
	  }
	}
	.order-state {
	  display: flex;
	  align-items: center;
	  font-size: 24rpx;
	  .order-sts.red {
	    color: #eb2444;
	  }
	  .order-sts.gray {
	    color: #999;
	  }
	}
	.other-button-hover {
	  background-color: blue;
	}
	.button-hover {
	  background-color: red;
	  background-color: blue;
	}
	.button {
	  margin-top: 20rpx;
	  margin-bottom: 20rpx;
	  margin-left: 10px;
	  font-size: 26rpx;
	  background: #fff;
	  padding: 10rpx 30rpx;
	  border-radius: 80rpx;
	  border: 2rpx solid #e1e1e1;
	  &:last-child {
	    margin-right: 10rpx;
	  }
	}
	.button.warn {
	  color: #eb2444;
	  border-color: #eb2444;
	}
	.empty {
	  font-size: 24rpx;
	  margin-top: 100rpx;
	  text-align: center;
	  color: #999;
	  height: 300rpx;
	  line-height: 300rpx;
	}
	
</style>